<template>
	<view class="withdraw-form">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="form">
			<!-- 银行卡 -->
			<view class="form" v-if="type == 1">
				<view class="form-item">
					<text class="label">姓名</text>
					<view class="form-input"><input v-model="formData.member_name" type="text" placeholder="请输入真实姓名" />
					</view>
				</view>
				<view class="form-item">
					<text class="label">开户行</text>
					<view class="form-input"><input v-model="formData.pay_account" type="text" placeholder="请填写开户行" />
					</view>
				</view>
				<view class="form-item">
					<text class="label">卡号</text>
					<view class="form-input"><input v-model="formData.pay_card_id" type="text" placeholder="请填写卡号" />
					</view>
				</view>
				<view class="form-item">
					<text class="label">联系电话</text>
					<view class="form-input"><input v-model="formData.mobile" type="text" placeholder="请填联系电话" /></view>
				</view>
			</view>

			<!-- 支付宝 -->
			<view class="form" v-if="type == 2">
				<view class="form-item">
					<text class="label">姓名</text>
					<view class="form-input">
						<input v-model="formData.member_name" type="text" placeholder="请输入真实姓名" />
					</view>
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<view class="form-input">
						<input v-model="formData.alipay_account" type="text" placeholder="请填写支付宝手机号" />
					</view>
				</view>
				<view class="form-item">
					<text class="label">联系电话</text>
					<view class="form-input"><input v-model="formData.mobile" type="text" placeholder="请填联系电话" /></view>
				</view>
			</view>

			<!-- 微信 -->
			<view class="form" v-if="type == 3">
				<view class="form-item">
					<text class="label">姓名</text>
					<view class="form-input">
						<input v-model="formData.member_name" type="text" placeholder="请输入真实姓名" />
					</view>
				</view>
				<view class="form-item">
					<text class="label">微信账户</text>
					<view class="form-input">
						<input v-model="formData.wechat_account" type="text" placeholder="请填写微信号" />
					</view>
				</view>
				<view class="form-item">
					<text class="label">联系电话</text>
					<view class="form-input"><input v-model="formData.mobile" type="text" placeholder="请填联系电话" /></view>
				</view>
			</view>

			<u-button class="btn" shape="circle" @click="submit()">{{submitText}}</u-button>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '提现账号',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		type: 1,
		formData: {
			wechat_account: "",
			alipay_account: "",
			is_h5: 0,
			member_name: "",
			mobile: "",
			openid: "",
			pay_account: "",
			pay_address: "",
			pay_card_id: "",
			payment_type: 0,
		},
		loading: false,
		h5: 0,
		submitText: "立即提交",
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
			getDetail(opt.id);
		}
		switch (opt.type) {
			case '1':
				state.title = '银行卡提现账号';
				state.type = parseInt(opt.type);
				break;
			case '2':
				state.title = '支付宝提现账号';
				state.type = parseInt(opt.type);
				break;
			case '3':
				state.title = '微信提现账号';
				state.type = parseInt(opt.type);
				break;
			default:
				state.title = '银行卡提现账号';
				state.type = 1;
				break;
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
		// #ifdef H5
		state.h5 = 1;
		// #endif
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getDetail(id) {
		console.log('账号详情', id);
		state.formData = {
			wechat_account: "",
			alipay_account: "",
			is_h5: 0,
			member_name: "",
			mobile: "",
			openid: "",
			pay_account: "",
			pay_address: "",
			pay_card_id: "",
			payment_type: 0,
		};
	}

	function submit() {
		if (!beforeSubmit()) {
			return;
		}

		if (state.loading) {
			return;
		}
		state.loading = true;

		state.formData.is_h5 = this.h5;
		state.formData.payment_type = this.type;

		console.log('提交', state.formData);
	}

	// 提交前验证
	function beforeSubmit() {
		if (!util.username(state.formData.member_name, '姓名')) {
			return false;
		}
		if (state.type == 1) {
			// 银行卡认证
			if (!util.username(state.formData.pay_account, '开户行')) {
				return false;
			}
			if (!util.username(state.formData.pay_card_id, '银行卡号')) {
				return false;
			}
		} else if (state.type == 2) {
			// 支付宝认证
			if (!util.username(state.formData.alipay_account, '支付宝账号')) {
				return false;
			}
		} else if (state.type == 3) {
			// 微信认证
			if (!util.username(state.formData.wechat_account, '微信号')) {
				return false;
			}
		}

		if (!util.mobile(state.formData.mobile, '联系电话')) {
			return false;
		}
		return true;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		type,
		formData,
		loading,
		h5,
		submitText
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $u-bg-reverse-color;
	}

	.withdraw-form {
		.form {
			padding: $m32;

			.form-item {
				@include f-between;

				.label {
					width: 140rpx;
				}

				.form-input {
					flex: 1;
					border-bottom: 1px solid $u-border-color;

					input {
						height: 76rpx;
					}
				}
			}
		}

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(to right, #125cd7, #279dfa);
			color: #fff;
			text-align: center;
		}
	}
</style>